const container = document.getElementById('container')
const SQUARES = 500

//默认格子的背景颜色和阴影颜色
const defaultColor = {
    backgroundColor: "#1d1d1d",
    boxShadow: "0 0 2px #000"
}

//生成随机颜色
function getRandomColor() { 
    return `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
}


for (let index = 0; index < SQUARES; index++) {
    const square = document.createElement('div')
    square.classList.add("square")

    square.addEventListener('mouseover', () => {
        square.style.backgroundColor = getRandomColor()
    })

    square.addEventListener('mouseout', () => {
        square.style.backgroundColor = defaultColor.backgroundColor;
        square.style.boxShadow = defaultColor.boxShadow;
    })

    container.append(square)
}

